<template>
	<view class="bottom-btn">
		<view class="bottom-dis">
			<view class="btn-left" :style="{width:leftWidth+'%'}">
				<view class="btn-share" v-if="left">
					<view @tap="$emit('share')">
						<i class="icon iconColor size28 margin-right">&#xe604;</i>
						<text class="size24 textColor">分享</text>
					</view>
					<text class="btn-xian"></text>
					<view @tap="$emit('service')">
						<i class="icon iconColor size28 margin-right">&#xe6a6;</i>
						<text class="size24 textColor">咨询</text>
					</view>
				</view>
				<slot name="left"></slot>
			</view>
			<view class="btn" :style="[btnStyle]" @tap="$emit('btn')">
				<text class="size30">{{font}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			font:{
				type:String,
				default:'立即报名'
			},
			left:{
				type:Boolean,
				default:true
			},
			leftWidth:{
				type:Number,
				default:50
			},
			rightWidth:{
				type:Number,
				default:50
			},
			//颜色
			btnBg:{
				type:[Number,String],
				default:1
			}
		},
		computed:{
			btnStyle() {
				const {btnBg,rightWidth} = this;
				let style = '';
				if(btnBg === 1){
					style = {
						background: 'linear-gradient(-45deg, #BF3736, #D3504F)',
						width:`${rightWidth}%`
					};
				}else{
					style = {
						background: 'linear-gradient(45deg, #E1E1E1, #999999)',
						width:`${rightWidth}%`
					};
				}
				return style;
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-btn{
		height: 110upx;
		width: 100%;
		.bottom-dis{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 110upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			z-index: 22;
			.btn{
				height: 100%;
				// background: linear-gradient(-45deg, #BF3736, #D3504F);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
			.btn-left{
				height: 100%;
				box-shadow: 0px -1px 9px 0px rgba(202, 202, 202, 0.35);
			}
			.btn-share{
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				view{
					height: 100%;
					display: flex;
					align-items: center;
				}
				.btn-xian{
					width:2upx;
					height: 32upx;
					background-color: #dddddd;
					margin:0 45upx;
				}
			}
		}
	}
	.margin-right{
		margin-right: 13upx;
	}
</style>
